<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面向对象选项卡</title>
		<style>
        *{
            margin: 0;
            padding: 0;
        }
        #TOP,#bottom{
        	margin: 50px;
        	float: left;
        }
        #TOP>button,#bottom>button{
            width: 100px;
            height: 40px;
            border: 0;
        }
        #TOP>div,#bottom>div{
            width: 300px;
            height: 200px;
            border: 5px solid pink;
            display: none;
            text-align: center;
            line-height: 200px;
            color: red;
        }
        #TOP>button.active,#bottom>button.active{
            background-color: orange;
        }
        #TOP>div.active, #bottom>div.active{
            display: block;
        }
    </style>
		<div id="TOP">
    <button class="active">花花</button>
    <button>华晨宇</button>
    <button>赵彩琪</button>
    <div class="active">花花</div>
    <div>华晨宇</div>
    <div>赵彩琪</div>
</div>
<div id="bottom">
    <button class="active">烟火里的尘埃</button>
    <button>我的滑板鞋</button>
    <button>齐天大圣</button>
    <div class="active">烟火里的尘埃</div>
    <div>我的滑板鞋</div>
    <div>齐天大圣</div>
</div>
		
	</head>
	<body>
		
	</body>
	<script>
        /*
        * 1.不要出现函数嵌套函数
        * 2.把最外层的函数中的所有的变量，全部作为全局变量
        * */
        /*
        * 改为面向对象：
        * 1.将所有的全局变量，全部作为属性\
        * 2.把函数放到原型上
        * 3.onload创建实例化对象
        * 4.修改this
        * */
        window.onload = function () {

            var t1 = new Tab("#TOP") //创建
            t1.init()  //初始化
            var t1 = new Tab("#bottom") //创建
            t1.init()  //初始化

        }
        
        function Tab(id) {
            this.oDiv = document.querySelector(id)
            this.aBtn = this.oDiv.querySelectorAll("button")
            this.aDiv = this.oDiv.querySelectorAll("div");
        }

        Tab.prototype.init = function () {
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index = i;
                var This = this;
                this.aBtn[i].onclick = function () {
                    This.changeTab(this)
                }
            }
        }
        
        Tab.prototype.changeTab = function (oBtn){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className = ""
                this.aDiv[i].style.display = "none"
            }
            oBtn.className = "active";
            this.aDiv[oBtn.index].style.display = "block"
        }
	</script>
</html>
